<template>
  <div>
  <el-dialog
    title="添加挂Q"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="add-q-form"
    >
      <!-- 云机标识 -->
      <el-form-item label="云机编号" prop="machineAlias">
        {{ selectedQ.machineAlias }}
      </el-form-item>
       <el-form-item label="到期时间" prop="machineId">
         {{parseTime(selectedQ.leaseEndTime, '{y}-{m}-{d}')}}
       
      </el-form-item>
      <!-- QQ账号 -->
      <el-form-item label="QQ账号" prop="account">
        <el-input
          v-model="form.account"
          placeholder="请输入QQ账号"
          style="width: 350px"
          maxlength="20"
         
        />
      </el-form-item>

      <!-- 登录类型 -->
      <el-form-item label="登录类型" prop="loginType">
        <el-radio-group v-model="form.loginType">
          <el-radio :label="1">
            <span class="login-type-text">TIM</span>
           
          </el-radio>
          <el-radio :label="2">
            <span class="login-type-text">QQ</span>
            
          </el-radio>
        </el-radio-group>
        <div class="tip">
          建议使用TIM登录，如果TIM登录不上的账号再使用QQ登录。
        </div>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        @click="handleSubmit"
      >
        添加挂Q
      </el-button>
    </div>
    
  </el-dialog>


  </div>
</template>

<script>
import { addQ } from '@/api/tenantApis/cloudMachine'


export default {
  name: 'AddQDialog',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectedQ: {
      type: [Object],
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      submitLoading: false,
      form: {
        machineId: '',
        account: '',
        loginType: 1 // 默认选择TIM
      },
    
      rules: {
        account: [
          { required: true, message: '请输入QQ账号', trigger: 'blur' },
          { min: 5, max: 20, message: 'QQ账号长度在5到20个字符', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: 'QQ账号只能包含数字', trigger: 'blur' }
        ],
        loginType: [
          { required: true, message: '请选择登录类型', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogVisible = newVal
        if (newVal) {
          this.initForm()
        }
      },
      immediate: true
    },
  },
  created() { 
    console.log('%c Line:17 💩 this.selectedQ', 'color:#3f7cff', this.selectedQ)
  },
  methods: {
    // 初始化表单
    initForm() {
      this.form = {
        machineId: this.selectedQ.machineId || '',
        account: '',
        loginType: 1
      }

      // 清除验证
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },

    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitForm()
        }
      })
    },

    // 提交表单数据
    async submitForm() {
      this.submitLoading = true
      try {
        const submitData = {
          machineId: this.form.machineId,
          account: this.form.account,
          loginType: this.form.loginType
        }
        if(submitData.account) submitData.account = submitData.account.trim()
          const res =  await addQ(submitData)
          let dataJson = {...this.selectedQ,...this.form}
        
          //  this.$refs.yunjiWeburlRef.open(dataJson,res.data.wss_url,res.data.sessionId)
       
        // this.$message.success('添加挂Q成功')
        // this.handleClose()
        this.$emit('success',dataJson,res.data.wss_url,res.data.sessionId)
           this.dialogVisible = false
      } catch (error) {
        console.error('添加挂Q失败:', error)
      } finally {
        this.submitLoading = false
      }
    },

    // 关闭弹窗
    handleClose() {
       this.form= {
        machineId: '',
        account: '',
        loginType: 1 // 默认选择TIM
      },
      this.dialogVisible = false
   
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.add-q-form {

  .login-type-text {
    font-weight: bold;
    color: #333;
  }

  .login-type-desc {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
  }
}



.dialog-footer {
  text-align: right;
}

// 响应式设计
@media (max-width: 768px) {
  .add-q-form {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
  
 
}
.tip{
  color: #999;
}
</style>
